<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../../js/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script type="text/javascript" src="../../js/react-dom.development.js"></script>
    <!-- 用于将jsx转为js -->
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    <!-- 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../../js/prop-types.js"></script>
</head>
<body>
    <div id="test"></div>

    <script type="text/babel">
        // 父组件
        class Father extends React.Component{
            constructor(props){
                super(props)
                console.log(0,"constructor");
                this.state = {
                    updating: false,
                    shouldUpdate: true,
                    present: "旺仔小馒头"
                }
            }
            // static defaultProps = {
            //     present: "something"
            // }
            // 组件即将挂载
            componentWillMount(){
                console.log(1,"will mount");
            }
            // 组件挂载后操作
            componentDidMount(){
                console.log(3,"mount done");
            }
            // 组件即将卸载
            componentWillUnmount(){}
            death = (event)=>{
                console.log(7,"will unmount");
                // 卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById("test"))
                console.log(8,"unmount done");
            }
            // 是否让组件更新的阀门，默认返回true
            shouldComponentUpdate(){
                console.log(4,"should componente update? ",this.state.shouldUpdate);
                return this.state.shouldUpdate
            }
            // 组件即将更新 
            componentWillUpdate(){
                console.log(5,"component will update");
            }
            render(){
                console.log(this.state.updating===false ? 2 : 6,"rendering");
                // item = {item: "hehe"}
                // const {item} = this.props
                if(this.state.updating===true){
                    console.log(7,"component did update");
                }
                return (
                    <div>
                        <h2>life circle{this.state.updating ? '!!':''}</h2>
                        <button onClick={this.death}>kill</button>
                        <button onClick={this.componentUpdate}>normal update</button>
                        <button onClick={this.componentForceUpdate}>force update</button>
                        <button onClick={this.changePresent}>change present</button>
                        <Son present={this.state.present}/>
                    </div>
                )
            }
            // 正常更新
            componentUpdate = ()=>{
                let {updating} = this.state
                // console.log(4,"updating");
                this.setState({updating: !updating})
                // console.log(5,"update done");
            }
            // 强制更新
            componentForceUpdate = ()=>{
                // let {updating} = this.state
                // console.log(4,"updating");
                // this.setState({updating: !updating})
                this.forceUpdate()
                // console.log(5,"update done");
            }
            // 向子组件传props
            changePresent = ()=>{
                let {present} = this.state
                this.setState({present: "旺仔QQ糖"})
                // this.state.present = "旺仔QQ糖"
            }
        }
        
        // 子组件
        class Son extends React.Component{
            componentWillReceiveProps = (props)=>{
                console.log("will receive new props ",props);
                console.log("when you see this, means it's the second times receiving props");
            }
            render(){
                return (
                    <div>
                        <h2>Receive Present From Father: {this.props.present}</h2>
                    </div>
                )
            }
        }
        let p ={}
        ReactDOM.render(<Father {...p}/>,document.getElementById("test"))
    </script>
</body>
<style>
</style>
</html>